<template>
  <div>
    <el-menu class="el-menu-demo"
             mode="horizontal">
      <el-menu-item index="1"
                    @click="activitycomment">活动评论</el-menu-item>

      <el-menu-item index="2"
                    @click="dynamiccomment">动态评论</el-menu-item>

      <el-menu-item index="3"
                    @click="goodscomment">商品评论</el-menu-item>
    </el-menu>
    <div>
      <el-container>
        <el-main>
          <activitycomment v-if="this.isVisible===1"></activitycomment>
          <dynamiccomment v-if="this.isVisible===2"></dynamiccomment>
          <goodscomment v-if="this.isVisible===3"></goodscomment>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
//子组件
import activitycomment from './comment/activitycomment'
import dynamiccomment from './comment/dynamiccomment'
import goodscomment from './comment/goodscomment'

export default {
  data () {
    return {
      isVisible: 1
    }
  },
  components: {
    activitycomment,
    dynamiccomment,
    goodscomment
  },
  methods: {
    activitycomment () {
      this.isVisible = 1;
    },
    dynamiccomment () {
      this.isVisible = 2;
    },
    goodscomment () {
      this.isVisible = 3;
    }
  }
}
</script>

<style scoped>
</style>